<template>
  <div class="backtop" v-show="isShow" @click="backTop">
    <img
    class="img"
      src="http://static1.qianqian.com/web/st/images/icon-back2top2.af69f845890e1a53.png"
      alt=""
      srcset=""
    />
  </div>
</template>

<script>
export default {
  name: "BackTop",
  data() {
    return {
      isShow: false,
    };
  },
  mounted() {
    let clientHight = document.documentElement.clientHeight;
    window.addEventListener("scroll", () => {
      let scrollTop = document.documentElement.scrollTop;
      if (scrollTop > clientHight) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    });
  },
  methods: {
    backTop() {
      document.documentElement.scrollTop = 0;
    },
  },
};
</script>

<style scoped lang="less" >
.backtop {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 50px;
  .img {
    height: 50px;
    width: 50px;
  }
}
</style>